<template>
  <view class="content">
    <view class="main">
      <view v-for="(item) in can_detail" :key="item.title" class="can_item">
        <view class="can_name">{{ item.name }}</view>
        <view class="can_detail">
          {{ item.introduce }}
        </view>
        <view class="can_bg">
          <img
            :src="item.icon || 'https://ts1.tc.mm.bing.net/th/id/R-C.6d421254f2c5ee4c95de0620b4a1bf5a?rik=eje%2bLA0Zv8tm9Q&riu=http%3a%2f%2fimg7.ddove.com%2fupload%2f20180104%2f180646660342.jpg&ehk=351TXYvcsCWW5LSxhwuIAGmNKV%2byCz0lUKErwp6VpZ0%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'"
            alt="">
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import useSchoolStore from '@/store/modules/school'
const useSchool = useSchoolStore()

console.log('useSchool.schoolCanteen: ', useSchool.schoolCanteen);

let can_detail = ref([
  { name: "第一食堂", introduce: "新余学院第一食堂是学校重要的餐饮场所，环境舒适，设施齐全，配备了中央空调、钢琴和液晶大电视，为师生提供了良好的用餐体验。食堂菜品种类丰富，包括特色小吃、套餐饭和风味面食等，价格实惠，能满足不同口味需求。此外，第一食堂注重食品安全，曾荣获新余市首届餐饮单位食品安全星级评定五星级，并多次举办食堂开放日活动，邀请学生参观体验，增强师生对食堂的信任。" },
  { name: "第二食堂", introduce: "新余学院第二食堂是学校重要的餐饮场所之一，位于校园内，靠近男生宿舍。食堂内部环境整洁，设施齐全，设有多个特色档口，提供丰富的菜品。这里汇聚了南北风味小吃，如南方的千里香馄饨、热干面，北方的煎饼，以及麻辣的重庆小面等。此外，二食堂还设有清真窗口，满足不同民族学生的饮食需求。食堂整体注重食品安全，曾开展“亲身体验，共筑健康厨房”活动，邀请学生志愿者参观食堂运营流程。" },
  { name: "新食堂", introduce: "新余学院新食堂是学校最新投入使用的餐饮场所，位于校园中心区域，环境宽敞明亮，设施现代化。食堂内部装修风格简约时尚，配备了智能点餐系统和自助结算设备，提升用餐效率。菜品丰富多样，涵盖各地特色美食，满足不同口味需求。此外，新食堂还设有专门的清真窗口和健康轻食区，为师生提供更健康、更个性化的选择。" },
])

if (useSchool.schoolCanteen) {
  can_detail = useSchool.schoolCanteen
}
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 100rpx);
  overflow: auto;
  background-size: cover;
  background-position: 0% 350%;
  position: relative;

  .main {
    width: 100%;
    background-color: $uni-bg-color-grey;
    padding: 20rpx 30rpx;
    border-radius: 24rpx;

    background-color: #f8f8f8;

    .can_item {
      background-color: white;
      padding: 30rpx;

      .can_name {
        width: 100%;
        color: $uni-text-color;
        font-size: 28rpx;
        font-weight: 600;
      }

      .can_detail {
        width: 100%;
        font-size: 24rpx;
        color: $uni-text-color-grey;
        margin-top: 20rpx;
      }

      .can_bg {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 30rpx 0;

        img {
          width: 100%;
        }
      }
    }


  }
}
</style>